<template>
	<view class="designerPopupView">
		<view class="title" :style="{'height': navHeight+statusBarHeight + 'px'}">
			<text class="iconfont iconhuaban73" @tap="$emit('close')"></text>
			<view class="serch">
				<text class="iconfont iconhuaban18" @tap="getDesigner()"></text>
				<input type="text" v-model="keyword" confirm-type="search" @confirm="getDesigner()"
					placeholder="搜索设计师" />
			</view>
		</view>
		<cl-filter-bar @change="onchange()">
			<!-- 多选下拉 -->
			<cl-filter-item v-model="identityData.val" label="类型" :options="identityData.list" type="dropdown">
			</cl-filter-item>
			<cl-filter-item v-model="offerData.val" label="报价" :options="offerData.list" type="dropdown" prop="zh">
			</cl-filter-item>
			<cl-filter-item v-model="styleData.val" label="风格" :options="styleData.list" type="dropdown" prop="zh">
			</cl-filter-item>
			<cl-filter-item v-model="offer_sort.val" label="价格" :options="offer_sort.list" type="dropdown" prop="zh">
			</cl-filter-item>
		</cl-filter-bar>
		<scroll-view class="designerList" scroll-y="true" @scrolltolower="scrolltolower">

			<view class="storeList" v-for="(item,index) in designerData.data" :key="index">
				<view class="row-1">
					<view class="col-1">
						<image :src="item.avatar.path" mode=""></image>
						<view class="store">
							<text class="storeName">{{item.name}}</text>
							<text class="introduce">从业{{item.employ_year}}年 | 方案{{item.case_num}} | {{ item.start_offer }}-{{ item.end_offer }}㎡</text>
						</view>
					</view>
					<view class="col-2" @tap="$emit('sendPopupMsg',item,'designer');$emit('close')">发送</view>
				</view>
				<view class="row-3">
					<view class="btn" v-for="(item3,index3) in item.design_style" :key="index3">{{ item3.name }}</view>
				</view>
				<view class="row-2">
					<scroll-view class="tab-scroll-view" :scroll-x="true">
						<view class="tab-item" v-for="(item2,index2) in item.case_thumb_url" :key="index2">
							<image :src="item2.path" mode=""></image>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="tips" v-if="designerData.noMore">没有更多了！</view>
		</scroll-view>

	</view>
</template>

<script>
	import customeApi from '@/service/custome.js'
	import clFilterBar from "./cl-uni/components/cl-filter-bar/cl-filter-bar.vue"
	import clFilterItem from "./cl-uni/components/cl-filter-item/cl-filter-item.vue"
	export default {
		components: {
			clFilterBar,
			clFilterItem
		},
		computed: {
			navHeight() {
				return this.$store.state.system.navBarHeight
			}, // Nav栏高度
			statusBarHeight() {
				let systemInfo = uni.getSystemInfoSync()
				return systemInfo.statusBarHeight || 0
			}
		},
		data() {
			return {
				identityData: {
					list: [{
						value: null,
						label: '全部'
					}, {
						value: '1',
						label: '个人设计师'
					}, {
						value: '2',
						label: '设计机构'
					}, ],
					val: ''
				},
				offer_sort: {
					list: [{
						value: null,
						label: '全部'
					}, {
						value: 'asc',
						label: '价格从低到高'
					}, {
						value: 'desc',
						label: '价格从高到低'
					}, ],
					val: ''
				},
				styleData: {
					list: [],
					val: ''
				},
				offerData: {
					list: [],
					val: ''
				},
				keyword: '',
				designerData: {
					status: 1,
					data: [],
					page: 1,
					pagesize: 10,
					noMore: false
				}
			}
		},
		mounted() {
			this.getOption();
			this.getDesigner();
		},
		methods: {
			onchange(){
				this.designerData.page=1;
				this.getDesigner();
			},
			scrolltolower() {
				if (this.designerData.noMore) {
					return
				};
				this.designerData.page++;
				this.getDesigner(true);
			},
			getOption() {
				customeApi.getOptionList({}).then(res => {
					if (res.code === 1) {

						this.styleData.list = res.data.design_style;
						this.offerData.list = res.data.offer_section;
						this.styleData.list.map(item => {
							item['label'] = item.name;
							delete item.name;
							delete item.value;
							item['value'] = item.id;

						})
						this.offerData.list.map(item => {
							item['label'] = item.name;
							delete item.name
						});

						this.styleData.list.unshift({
							'label': '全部',
							'value': null
						})

						this.offerData.list.unshift({
							'label': '全部',
							'value': null
						})
					} else {
						this.$utils.showErr({
							title: res.msg
						})
					}
				})
			},
			getDesigner(paging = false) {
				if (!paging) {
					this.designerData.page = 1;
				}
				customeApi.designer({
					offer_sort: this.offer_sort.val,
					keyword: this.keyword,
					style: this.styleData.val,
					offer_section: this.offerData.val,
					identity: this.identityData.val,
					page: this.designerData.page,
					pagesize: this.designerData.pagesize,
				}).then(res => {
					if (res.code === 1) {
						if (this.designerData.page * this.designerData.pagesize >= res.data.count) {
							this.designerData.noMore = true;
						}else{
							this.designerData.noMore = false;
						}

						if (paging) {
							res.data.list.map(item => {
								this.designerData.data.push(item);
							})
						} else {
							this.designerData.data = res.data.list
						}
						this.designerData.status = 2;
					} else {
						this.$utils.showErr({
							title: res.msg
						})
						this.designerData.status = 3;
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.designerPopupView {
		background: #F9FAFC;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		width: 100%;
		height: 100%;

		.designerList {
			flex: 1;
			overflow: hidden;
		}

		.tips {
			line-height: 80rpx;
			text-align: center;
			//color: #333;
		}

		.storeList {
			width: 686rpx;
			background: #FFFFFF;
			margin: 0 auto;
			border-radius: 8rpx;
			padding: 0 28rpx;
			margin-bottom: 28rpx;

			.row-3 {
				margin-top: 10rpx;
				margin-left: 92rpx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				.btn {
					margin-bottom: 32rpx;
					text-align: center;
					padding: 0 20rpx;
					height: 36rpx;
					background: #F9F6F3;
					border-radius: 18rpx;
					color: #A98F68;
					font-size: 22rpx;
					margin-right: 28rpx;
				}
			}

			.row-1 {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding-top: 30rpx;

				.col-1 {
					display: flex;
					align-items: center;

					image {
						width: 76rpx;
						height: 76rpx;
						border-radius: 50%;
					}

					.store {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						height: 60rpx;
						margin-left: 16rpx;

						.storeName {
							font-size: 28rpx;
							color: #1A1C20;
						}

						.introduce {
							font-size: 20rpx;
							color: #939393;
						}
					}
				}

				.col-2 {
					width: 122rpx;
					height: 44rpx;
					line-height: 44rpx;
					text-align: center;
					border-radius: 20rpx;
					background: #C3AB7C;
					color: #fff;
					font-size: 28rpx;
				}
			}

		}

		.row-2 {
			padding-bottom: 24rpx;

			.tab-scroll-view {
				flex-direction: row;
				white-space: nowrap;

				.tab-item {
					display: inline-block;
					width: 200rpx;
					height: 200rpx;
					margin-right: 20rpx;
					position: relative;
					image{
						border-radius: 8rpx;
					}
					.price {
						position: absolute;
						bottom: 0;
						left: 0;
						width: 82rpx;
						height: 28rpx;
						line-height: 28rpx;
						text-align: center;
						background: #7A7A7A;
						font-size: 14rpx;
						color: #fff;
						border-radius: 0px 8rpx 0px 8rpx;
					}
				}
			}
		}

		.title {
			display: flex;
			width: 100%;
			height: 88rpx;
			background: #F6F7FB;
			align-items: center;

			.iconhuaban73 {
				font-size: 36rpx;
				color: #333333;
				padding: 0 20rpx;
			}

			.serch {
				display: flex;
				align-items: center;
				width: 422rpx;
				height: 62rpx;
				background: #FFFFFF;
				border-radius: 34rpx;

				.iconhuaban18 {
					font-size: 32rpx;
					color: #939393;
					padding: 0 20rpx 0 10rpx;
				}

			}
		}
	}
</style>
